<template>
  <div class="main">
    <div class="item"><v-chart class="chart" :option="option1" /></div>
    <div class="item"><v-chart class="chart" :option="option2" /></div>
    <div class="item"><v-chart class="chart" :option="option3" /></div>
    <div class="item"><v-chart class="chart" :option="option4" /></div>
    <div class="item"><v-chart class="chart" :option="option5" /></div>
    <div class="item"><v-chart class="chart" :option="option6" /></div>
    <div class="item"></div>
  </div>
</template>

<script>
import { pollutionGet } from "@/api/city";
export default {
  data() {
    return {
      dates: [],
      option: {},
      option1: {
        backgroundColor: "#fff",
        title: {
          text: "瞬时流量",
          textStyle: {
            fontSize: 12,
            fontWeight: 400,
          },
          left: "center",
          top: "5%",
        },
        //   legend: {
        //     icon: "circle",
        //     top: "5%",
        //     right: "5%",
        //     itemWidth: 6,
        //     itemGap: 20,
        //     textStyle: {
        //       color: "#556677",
        //     },
        //   },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            label: {
              show: true,
              backgroundColor: "#fff",
              color: "#556677",
              borderColor: "rgba(0,0,0,0)",
              shadowColor: "rgba(0,0,0,0)",
              shadowOffsetY: 0,
            },
            lineStyle: {
              width: 0,
            },
          },
          backgroundColor: "#fff",
          textStyle: {
            color: "#5c6c7c",
          },
          padding: [10, 10],
          extraCssText: "box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5)",
        },
        grid: {
          // top: "15%",
          left: "10%",
        },
        xAxis: {
          type: "category",
          name: "时间",
          boundaryGap: false,
          axisLabel: {
            textStyle: {
              color: "#000", // 设置 x 轴标签文字颜色
            },
          },
          data: [
            "2021-12-20 00:00:00",
            "2021-12-20 06:00:00",
            "2021-12-20 12:00:00",
            "2021-12-20 18:00:00",
            "2021-12-21 00:00:00",
            "2021-12-21 06:00:00",
            "2021-12-21 12:00:00",
            "2021-12-21 18:00:00",
            "2021-12-22 00:00:00",
          ],
        },
        yAxis: [
          {
            type: "value",
            name: "单位（L/s）",
            axisTick: {
              color: "#000",
              show: false,
            },
            axisLine: {
              lineStyle: {
                color: "#57617B",
              },
            },
            axisLabel: {
              margin: 10,
              textStyle: {
                fontSize: 14,
              },
            },
            splitLine: {
              lineStyle: {
                color: "#57617B",
              },
            },
          },
        ],
        series: [
          {
            name: "瞬时流量",
            type: "line",
            data: [10, 10, 30, 12, 15, 3, 7],
            symbolSize: 1,
            symbol: "circle",
            smooth: true,
            yAxisIndex: 0,
            showSymbol: false,
            lineStyle: {
              width: 5,
              shadowColor: "rgba(158,135,255, 0.3)",
              shadowBlur: 10,
              shadowOffsetY: 20,
            },
          },
        ],
      },
      option2: {
        backgroundColor: "#fff",
        title: {
          text: "水温",
          textStyle: {
            fontSize: 12,
            fontWeight: 400,
          },
          left: "center",
          top: "5%",
        },
        //   legend: {
        //     icon: "circle",
        //     top: "5%",
        //     right: "5%",
        //     itemWidth: 6,
        //     itemGap: 20,
        //     textStyle: {
        //       color: "#556677",
        //     },
        //   },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            label: {
              show: true,
              backgroundColor: "#fff",
              color: "#556677",
              borderColor: "rgba(0,0,0,0)",
              shadowColor: "rgba(0,0,0,0)",
              shadowOffsetY: 0,
            },
            lineStyle: {
              width: 0,
            },
          },
          backgroundColor: "#fff",
          textStyle: {
            color: "#5c6c7c",
          },
          padding: [10, 10],
          extraCssText: "box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5)",
        },
        grid: {
          // top: "15%",
          left: "10%",
        },
        xAxis: {
          type: "category",
          name: "时间",
          boundaryGap: false,
          axisLabel: {
            textStyle: {
              color: "#000", // 设置 x 轴标签文字颜色
            },
          },
          data: [
            "2021-12-20 00:00:00",
            "2021-12-20 06:00:00",
            "2021-12-20 12:00:00",
            "2021-12-20 18:00:00",
            "2021-12-21 00:00:00",
            "2021-12-21 06:00:00",
            "2021-12-21 12:00:00",
            "2021-12-21 18:00:00",
            "2021-12-22 00:00:00",
          ],
        },
        yAxis: [
          {
            type: "value",
            name: "单位（℃）",
            axisTick: {
              color: "#000",
              show: false,
            },
            axisLine: {
              lineStyle: {
                color: "#57617B",
              },
            },
            axisLabel: {
              margin: 10,
              textStyle: {
                fontSize: 14,
              },
            },
            splitLine: {
              lineStyle: {
                color: "#57617B",
              },
            },
          },
        ],
        series: [
          {
            name: "水温",
            type: "line",
            data: [10, 10, 30, 12, 15, 3, 7],
            symbolSize: 1,
            symbol: "circle",
            smooth: true,
            yAxisIndex: 0,
            showSymbol: false,
            lineStyle: {
              width: 5,
              shadowColor: "rgba(158,135,255, 0.3)",
              shadowBlur: 10,
              shadowOffsetY: 20,
            },
          },
        ],
      },
      option3: {
        backgroundColor: "#fff",
        title: {
          text: "化学需氧量",
          textStyle: {
            fontSize: 12,
            fontWeight: 400,
          },
          left: "center",
          top: "5%",
        },
        //   legend: {
        //     icon: "circle",
        //     top: "5%",
        //     right: "5%",
        //     itemWidth: 6,
        //     itemGap: 20,
        //     textStyle: {
        //       color: "#556677",
        //     },
        //   },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            label: {
              show: true,
              backgroundColor: "#fff",
              color: "#556677",
              borderColor: "rgba(0,0,0,0)",
              shadowColor: "rgba(0,0,0,0)",
              shadowOffsetY: 0,
            },
            lineStyle: {
              width: 0,
            },
          },
          backgroundColor: "#fff",
          textStyle: {
            color: "#5c6c7c",
          },
          padding: [10, 10],
          extraCssText: "box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5)",
        },
        grid: {
          // top: "15%",
          left: "10%",
        },
        xAxis: {
          type: "category",
          name: "时间",
          boundaryGap: false,
          axisLabel: {
            textStyle: {
              color: "#000", // 设置 x 轴标签文字颜色
            },
          },
          data: [
            "2021-12-20 00:00:00",
            "2021-12-20 06:00:00",
            "2021-12-20 12:00:00",
            "2021-12-20 18:00:00",
            "2021-12-21 00:00:00",
            "2021-12-21 06:00:00",
            "2021-12-21 12:00:00",
            "2021-12-21 18:00:00",
            "2021-12-22 00:00:00",
          ],
        },
        yAxis: [
          {
            type: "value",
            name: "单位（mg/L）",
            axisTick: {
              color: "#000",
              show: false,
            },
            axisLine: {
              lineStyle: {
                color: "#57617B",
              },
            },
            axisLabel: {
              margin: 10,
              textStyle: {
                fontSize: 14,
              },
            },
            splitLine: {
              lineStyle: {
                color: "#57617B",
              },
            },
          },
        ],
        series: [
          {
            name: "化学需氧量",
            type: "line",
            data: [10, 10, 30, 12, 15, 3, 7],
            symbolSize: 1,
            symbol: "circle",
            smooth: true,
            yAxisIndex: 0,
            showSymbol: false,
            lineStyle: {
              width: 5,
              shadowColor: "rgba(158,135,255, 0.3)",
              shadowBlur: 10,
              shadowOffsetY: 20,
            },
          },
        ],
      },
      option4: {
        backgroundColor: "#fff",
        title: {
          text: "pH值",
          textStyle: {
            fontSize: 12,
            fontWeight: 400,
          },
          left: "center",
          top: "5%",
        },
        //   legend: {
        //     icon: "circle",
        //     top: "5%",
        //     right: "5%",
        //     itemWidth: 6,
        //     itemGap: 20,
        //     textStyle: {
        //       color: "#556677",
        //     },
        //   },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            label: {
              show: true,
              backgroundColor: "#fff",
              color: "#556677",
              borderColor: "rgba(0,0,0,0)",
              shadowColor: "rgba(0,0,0,0)",
              shadowOffsetY: 0,
            },
            lineStyle: {
              width: 0,
            },
          },
          backgroundColor: "#fff",
          textStyle: {
            color: "#5c6c7c",
          },
          padding: [10, 10],
          extraCssText: "box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5)",
        },
        grid: {
          // top: "15%",
          left: "10%",
        },
        xAxis: {
          type: "category",
          name: "时间",
          boundaryGap: false,
          axisLabel: {
            textStyle: {
              color: "#000", // 设置 x 轴标签文字颜色
            },
          },
          data: [
            "2021-12-20 00:00:00",
            "2021-12-20 06:00:00",
            "2021-12-20 12:00:00",
            "2021-12-20 18:00:00",
            "2021-12-21 00:00:00",
            "2021-12-21 06:00:00",
            "2021-12-21 12:00:00",
            "2021-12-21 18:00:00",
            "2021-12-22 00:00:00",
          ],
        },
        yAxis: [
          {
            type: "value",
            axisTick: {
              color: "#000",
              show: false,
            },
            axisLine: {
              lineStyle: {
                color: "#57617B",
              },
            },
            axisLabel: {
              margin: 10,
              textStyle: {
                fontSize: 14,
              },
            },
            splitLine: {
              lineStyle: {
                color: "#57617B",
              },
            },
          },
        ],
        series: [
          {
            name: "pH值",
            type: "line",
            data: [10, 10, 30, 12, 15, 3, 7],
            symbolSize: 1,
            symbol: "circle",
            smooth: true,
            yAxisIndex: 0,
            showSymbol: false,
            lineStyle: {
              width: 5,
              shadowColor: "rgba(158,135,255, 0.3)",
              shadowBlur: 10,
              shadowOffsetY: 20,
            },
          },
        ],
      },
      option5: {
        backgroundColor: "#fff",
        title: {
          text: "锰含量",
          textStyle: {
            fontSize: 12,
            fontWeight: 400,
          },
          left: "center",
          top: "5%",
        },
        //   legend: {
        //     icon: "circle",
        //     top: "5%",
        //     right: "5%",
        //     itemWidth: 6,
        //     itemGap: 20,
        //     textStyle: {
        //       color: "#556677",
        //     },
        //   },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            label: {
              show: true,
              backgroundColor: "#fff",
              color: "#556677",
              borderColor: "rgba(0,0,0,0)",
              shadowColor: "rgba(0,0,0,0)",
              shadowOffsetY: 0,
            },
            lineStyle: {
              width: 0,
            },
          },
          backgroundColor: "#fff",
          textStyle: {
            color: "#5c6c7c",
          },
          padding: [10, 10],
          extraCssText: "box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5)",
        },
        grid: {
          // top: "15%",
          left: "10%",
        },
        xAxis: {
          type: "category",
          name: "时间",
          boundaryGap: false,
          axisLabel: {
            textStyle: {
              color: "#000", // 设置 x 轴标签文字颜色
            },
          },
          data: [
            "2021-12-20 00:00:00",
            "2021-12-20 06:00:00",
            "2021-12-20 12:00:00",
            "2021-12-20 18:00:00",
            "2021-12-21 00:00:00",
            "2021-12-21 06:00:00",
            "2021-12-21 12:00:00",
            "2021-12-21 18:00:00",
            "2021-12-22 00:00:00",
          ],
        },
        yAxis: [
          {
            type: "value",
            name: "单位（mg/L）",
            axisTick: {
              color: "#000",
              show: false,
            },
            axisLine: {
              lineStyle: {
                color: "#57617B",
              },
            },
            axisLabel: {
              margin: 10,
              textStyle: {
                fontSize: 14,
              },
            },
            splitLine: {
              lineStyle: {
                color: "#57617B",
              },
            },
          },
        ],
        series: [
          {
            name: "锰含量",
            type: "line",
            data: [10, 10, 30, 12, 15, 3, 7],
            symbolSize: 1,
            symbol: "circle",
            smooth: true,
            yAxisIndex: 0,
            showSymbol: false,
            lineStyle: {
              width: 5,
              shadowColor: "rgba(158,135,255, 0.3)",
              shadowBlur: 10,
              shadowOffsetY: 20,
            },
          },
        ],
      },
      option6: {
        backgroundColor: "#fff",
        title: {
          text: "砷含量",
          textStyle: {
            fontSize: 12,
            fontWeight: 400,
          },
          left: "center",
          top: "5%",
        },
        //   legend: {
        //     icon: "circle",
        //     top: "5%",
        //     right: "5%",
        //     itemWidth: 6,
        //     itemGap: 20,
        //     textStyle: {
        //       color: "#556677",
        //     },
        //   },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            label: {
              show: true,
              backgroundColor: "#fff",
              color: "#556677",
              borderColor: "rgba(0,0,0,0)",
              shadowColor: "rgba(0,0,0,0)",
              shadowOffsetY: 0,
            },
            lineStyle: {
              width: 0,
            },
          },
          backgroundColor: "#fff",
          textStyle: {
            color: "#5c6c7c",
          },
          padding: [10, 10],
          extraCssText: "box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5)",
        },
        grid: {
          // top: "15%",
          left: "10%",
        },
        xAxis: {
          type: "category",
          name: "时间",
          boundaryGap: false,
          axisLabel: {
            textStyle: {
              color: "#000", // 设置 x 轴标签文字颜色
            },
          },
          data: [
            "2021-12-20 00:00:00",
            "2021-12-20 06:00:00",
            "2021-12-20 12:00:00",
            "2021-12-20 18:00:00",
            "2021-12-21 00:00:00",
            "2021-12-21 06:00:00",
            "2021-12-21 12:00:00",
            "2021-12-21 18:00:00",
            "2021-12-22 00:00:00",
          ],
        },
        yAxis: [
          {
            type: "value",
            name: "单位（ug/L）",
            axisTick: {
              color: "#000",
              show: false,
            },
            axisLine: {
              lineStyle: {
                color: "#57617B",
              },
            },
            axisLabel: {
              margin: 10,
              textStyle: {
                fontSize: 14,
              },
            },
            splitLine: {
              lineStyle: {
                color: "#57617B",
              },
            },
          },
        ],
        series: [
          {
            name: "砷含量",
            type: "line",
            data: [10, 10, 30, 12, 15, 3, 7],
            symbolSize: 1,
            symbol: "circle",
            smooth: true,
            yAxisIndex: 0,
            showSymbol: false,
            lineStyle: {
              width: 5,
              shadowColor: "rgba(158,135,255, 0.3)",
              shadowBlur: 10,
              shadowOffsetY: 20,
            },
          },
        ],
      },
    };
  },
  created() {
    pollutionGet({}).then((res) => {
      let phvalue = []; //ph
      let instantaneousvalue = []; //瞬时流量
      let mengvalue = []; // 锰
      let shenvalue = []; //砷
      let waterTempaturevalue = []; //水温
      let oilValue = []; //化学

      let dates = [];
      res.data.list.forEach((item) => {
        phvalue.push(item.phValue);
        instantaneousvalue.push(item.instantaneousData);
        mengvalue.push(item.mengValue);
        shenvalue.push(item.shenValue);
        waterTempaturevalue.push(item.waterTempature);
        oilValue.push(item.oilValue);

        dates.push(item.createTime);
      });
      console.log(dates);
      this.dates = dates.reverse();
      this.option1.series[0].data = instantaneousvalue;
      this.option2.series[0].data = waterTempaturevalue;
      this.option3.series[0].data = oilValue;
      this.option4.series[0].data = phvalue;
      this.option5.series[0].data = mengvalue;
      this.option6.series[0].data = shenvalue;

      this.option1.xAxis.data = dates;
      this.option2.xAxis.data = dates;
      this.option3.xAxis.data = dates;
      this.option4.xAxis.data = dates;
      this.option5.xAxis.data = dates;
      this.option6.xAxis.data = dates;
    });
  },
};
</script>

<style scoped>
.main {
  display: grid;
  padding: 8px 18px;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 8px;
  grid-template-rows: 320px 320px 200px;
}
</style>